<template>
    <div>
        <li>
            <!-- 勾选触发事件 -->
            <label 
            >

                <!-- 不推荐  违背了vue的原则  不修改父类的数据 -- 只读-->
                <!-- <input type="checkbox" v-model="item.done"> -->
                <!-- 推荐用法 -->
                <input 
                    type="checkbox" 
                    :checked="item.done" 
                    @change="oChecks(item.id)"
                    :class="node"
                >
                {{ item.title }}
            </label>
                <button @click="oItemDelete(item.id)">{{ del }}</button>
                <button>{{ xg }}</button>           
        </li>

    </div>
</template>

<script>
export default {
    name: 'myIteam',
    props: ["item",'Check','itemDelete'],
    data() {
        return {
            del: '删除',
            xg: '修改',
            node:'node'
        };
    },
    methods: {
        oChecks(id) {
            // console.log(id);
            this.Check(id);
        },
        oItemDelete(id) {
            // console.log(id);
            this.itemDelete(id);
        }
    }
}
</script>

<style scoped>
li {
    width: 600px;
    height: 30px;
    background-color: #fff;
    list-style: none;
    text-align: center;
    font-size: 20px;
    border-radius: 25px;
    margin-top: 10px;
    padding: 10px;
    box-shadow: 5px 5px 10px #556677;
}

li span {
    float: left;
}

li button {
    float: right;
    width: 70px;
    height: 30px;
    margin-top: 0px;
    margin-left: 10px;
    border-radius: 25px;
    box-shadow: 5px 5px 10px #556677;
    outline: 0;
}
.node{
    text-decoration: line-through;
    color: pink;
}


</style>
